<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useProductStore } from '@/stores';

const categories = ref<any>([]);
const products = ref<any>([]);
const productStore = useProductStore();
const search = ref<any>({});

onLoad(async () => {
	categories.value = await productStore.getCategories();
	await fetchProducts();
});

async function fetchProducts() {
	products.value = await productStore.getProducts({ ...search.value });
}

function handleSelect(item: any) {
	search.value.categoryId = item.id;
	delete search.value.name;
	fetchProducts();
}

function handleSearch() {
	delete search.value.categoryId;
	fetchProducts();
}

function handleViewDetail(item: any) {
	uni.navigateTo({
		url: '/pages/product/product?id=' + item.id
	});
}

function handleAddShoppingCart(item: any) {
	uni.navigateTo({
		url: '/pages/shopping-cart/shopping-cart'
	});
}
</script>

<template>
	<view>
		<view class="header">
			<x-title-bar>
				<dlk-position></dlk-position>
			</x-title-bar>
			<dlk-search v-model="search.name" placeholder="搜索商品名称：绘画" @ok="handleSearch"></dlk-search>
		</view>
		<x-row>
			<x-col flex="176rpx">
				<view class="tabs">
					<view @tap="handleSelect" :class="{ 'tabs-item': true, actived: !search.categoryId }">全部</view>
					<template v-for="item in categories">
						<view @tap="handleSelect(item)" :class="{ 'tabs-item': true, actived: item.id === search.categoryId }">{{ item.name }}</view>
					</template>
				</view>
			</x-col>
			<x-col flex="auto">
				<x-container direction="vertical" width="100%">
					<view class="product" v-for="item in products" @tap="handleViewDetail(item)" v-if="products.length > 0">
						<x-row>
							<x-col flex="180rpx">
								<x-image width="160rpx" height="160rpx" :src="item.cover?.url" :radius="8"></x-image>
							</x-col>
							<x-col flex="auto">
								<x-container direction="vertical" justify="between" height="100%">
									<x-space direction="vertical">
										<x-text color="#000000" :size="26" :line-height="30" align="justify" bold>{{ item.name }}</x-text>
										<x-text color="#999999" :size="24">4.8分丨已售:{{ item.salesVolume }}</x-text>
									</x-space>
									<x-container justify="between" class="product-info">
										<x-space :size="6" align="end">
											<x-space :size="0" align="end">
												<x-text color="#FA5732" :size="24">到手价</x-text>
												<dlk-currency :value="Number(item.price)" :size="36"></dlk-currency>
											</x-space>
											<x-text color="#999999" :size="24" line-through>￥{{ item.priceMarket }}</x-text>
										</x-space>
										<x-image class="buy" src="/index/buy.png" width="80rpx" height="80rpx" @tap.stop="handleAddShoppingCart(item)" prefix></x-image>
									</x-container>
								</x-container>
							</x-col>
						</x-row>
					</view>
					<x-container justify="center" padding="100rpx 0 0 0" v-else>
						<x-empty title="暂无商品" :size="100"></x-empty>
					</x-container>
				</x-container>
			</x-col>
		</x-row>
	</view>
</template>

<style lang="scss" scoped>
.header {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	padding: 20rpx 30rpx;
}

.product {
	box-sizing: border-box;
	padding: 24rpx;
	border-bottom: 1px solid #f6f6f6;
}

.product-info {
	position: relative;

	.buy {
		position: absolute;
		right: 0;
		bottom: -16rpx;
	}
}

.tabs {
	background-color: #f6f6f6;
	height: 100vh;
}

.tabs-item {
	color: #222222;
	font-size: 28rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	position: relative;

	&.actived {
		background-color: #fff;

		&::before {
			position: absolute;
			top: 50%;
			left: 0;
			display: block;
			content: '';
			background-color: #0023ad;
			width: 8rpx;
			height: 44rpx;
			border-radius: 0 50rpx 50rpx 0;
			transform: translateY(-50%);
		}
	}
}
</style>
